<template>
  <div class="c_box">
    <div class="week_line" v-if="showWeek">
      <span class="week_item" v-for="(item, index) in week" :key="index">{{item}}</span>
    </div>
    <div class="month_line">
      <span class="month_item fl1" @click="prevMonth()">prev</span>
      <span class="month_item fl2">{{dateDes}}</span>
      <span class="month_item fl1" @click="nextMonth()">next</span>
    </div>
    <div class="days_line">
      <template v-for="(item, index) in monthArr">
        <span
          :class="['day_item',item.isSpecialDay?'special_day':'',item.select]"
          :key="index"
          @click="dateSelect(item, 2)"
        >{{item.dayDes}}</span>
      </template>
    </div>
  </div>
</template>

<script>
import CModel from "../utils/calendar/CalendarModel";
import cal from "../utils/calendar/calendar";
export default {
  name: "calendarCom",
  components: {},
  props: {
    year: {
      type: Number,
      default: 0
    },
    month: {
      type: Number,
      default: 0
    },
    showWeek: {
      type: Boolean,
      default: true
    },
    customerDates: {
      type: Object,
      default: () => ({ "2020-04-14": { status: 1 } })
    },
    type: {
      type: String,
      default: "range"
    },
    maxRange: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      dateDes: "",
      cModel: null,
      monthArr: [],
      monthArrDisplay: [],
      dateRange: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    prevMonth() {
      this.cModel.prev().then(dt => {
        this.monthArrDisplay = dt.monthArr;
        this.dateDes = dt.dateDes;
        this.monthArr.concat(dt.monthArr);
      });
    },
    nextMonth() {
      this.cModel.next().then(dt => {
        this.monthArrDisplay = dt.monthArr;
        this.dateDes = dt.dateDes;
      });
    },
    dateSelect(date) {
      this.cModel
        .click(date)
        .then(dt => {
          console.log(dt);
          const { date, dateRange } = dt;
          this.dateRange = dateRange;
          let [a, b] = dateRange;
          console.log(a, b);

          this.monthArr = this.monthArr.map(item => {
            item.select = "";
            if (item.date) {
              if (this.type == "single") {
                if (item.date == date) {
                  item.select = "between";
                }
              } else if (this.type == "range") {
                if (a && item.date == a) {
                  item.select = "start";
                }
                if (b && item.date == b) {
                  item.select = "end";
                }
                if (
                  new Date(item.date).getTime() > new Date(a).getTime() &&
                  new Date(item.date).getTime() < new Date(b).getTime()
                ) {
                  item.select = "between";
                }
              }
            }

            return item;
          });
        })
        .catch(err => {
          console.log(err);
          alert(err.msg);
        });
    }
  },
  created() {
    this.cModel = new CModel({
      year: 2020,
      month: 4,
      maxRange: this.maxRange,
      type: this.type
    });
    this.week = cal.weeks;
    this.monthArr = this.cModel.render({
      customerDates: this.customerDates
    });
    console.log("monthArr:", this.monthArr);
    // this.monthArr = cal.render(2020, 4, this.customerDates);
  },
  mounted() {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.fl1 {
  flex: 1;
}
.fl2 {
  flex: 2;
}
.special_day {
  color: #f00;
}
.c_box {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  border: solid 2px black;
  box-sizing: border-box;
}
.week_line {
  width: 100%;
  line-height: 60px;
  position: sticky;
  top: 0;
  left: 0;
  transition: all 0.25s ease;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: solid 2px #d8d8d8;
  background: white;
  .week_item {
    text-align: center;
    width: 100%;
  }
}
.month_line {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80px;
  border-bottom: solid 2px lightgray;
  .month_item {
  }
}
.days_line {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, minmax(80px, auto));
  grid-gap: 0;
  .day_item {
    text-align: center;
    font-size: 26px;
    min-height: 80px;
    padding: 10px 4rpx;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 6px 0;
  }

  .start {
    background: coral !important;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    color: white;
  }
  .end {
    background: coral !important;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    color: white;
  }
  .between {
    background: coral !important;
    color: white;
  }
}
</style>